import { StyleSheet } from 'react-native';
import { APP_BLUE, APP_GRAY, APP_RED } from '../../constant/color';
import { phonePx } from '../../util/adapt';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  content: {
    alignItems: 'center',
    paddingTop: phonePx(20)
  },
  item: {
    width: phonePx(320),
    height: phonePx(130),
    borderRadius: phonePx(4),
    backgroundColor: '#ffffff',
    paddingHorizontal: phonePx(16)
  },
  shadow: {
    width: phonePx(320),
    height: phonePx(130),
    shadowColor: 'rgba(85, 85, 85, 0.05)',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 4,
    shadowRadius: 4,
    marginBottom: phonePx(16)
  },
  name: {
    color: '#4B505A',
    fontSize: phonePx(16),
    lineHeight: phonePx(22),
    fontWeight: '500',
    marginTop: phonePx(14)
  },
  time: {
    marginTop: phonePx(10),
    color: APP_GRAY,
    fontSize: phonePx(12),
    lineHeight: phonePx(17)
  },
  orderNumber: {
    marginTop: phonePx(4),
    color: APP_GRAY,
    fontSize: phonePx(12),
    lineHeight: phonePx(17)
  },
  statusContent: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: phonePx(17)
  },
  status: {
    color: APP_BLUE,
    fontSize: phonePx(12),
    lineHeight: phonePx(17),
    fontWeight: '500'
  },
  detail: {
    color: '#9096A3',
    fontSize: phonePx(12),
    lineHeight: phonePx(17),
    marginLeft: phonePx(12)
  },
  payContent: {
    position: 'absolute',
    right: phonePx(16),
    bottom: phonePx(12),
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  pay: {
    color: APP_GRAY,
    fontSize: phonePx(10),
    marginBottom: phonePx(1.5)
  },
  price: {
    color: APP_RED,
    fontSize: phonePx(16),
    fontWeight: '500'
  },
  orderDetail: {
    marginLeft: phonePx(4),
    width: phonePx(21),
    height: phonePx(9)
  }
});

export default styles;
